<template>
	<div class="container">
		<div ref="wrapper" class="wrapper-box" @mousedown="handleElDown" @mousemove="handleElMove" @mouseup="handleElUp">
			<div ref="fish" class="content-box" style="transform: translateX(0)">


				<slot></slot>


			</div>
		</div>
		<slot name="header"></slot>
		<el-image class="btn-img" style="left:20px;" :src="btnL" :fit="fit" @mousedown="handleDown(1)" @mouseup="handleStop" />
		<el-image class="btn-img" style="right:20px;" :src="btnR" :fit="fit" @mousedown="handleDown(-1)" @mouseup="handleStop" />
	</div>
</template>

<script>
import BScroll from 'better-scroll'
import btnL    from '@/assets/images/btn-l.png'
import btnR    from '@/assets/images/btn-r.png'

let timer    = null;
let step     = 20;
let fishX    = 0;
let wrapperW = 0;
let fishW    = 0;
export default {
	name      : "WHorizontalScroll",
	components: {},
	props     : {},
	data() {
		return {
			btnL,
			btnR,
			fit      : 'fill',
			scroll   : null,
			isScroll : false,//是否正在滑动
		}
	},
	computed  : {},
	methods   : {
		handleElDown() {
			this.isScroll                   = true;
			this.$refs.wrapper.style.cursor = 'grabbing';
		},
		handleElMove() {
			if (this.isScroll && this.$refs.wrapper.style.cursor !== 'grabbing') {
				this.$refs.wrapper.style.cursor = 'grabbing';
			}
		},
		handleElUp() {
			this.isScroll                   = false;
			this.$refs.wrapper.style.cursor = 'grab';
		},
		handleDown(direction) {
			// if (direction > 0 && fishX >= 0) return;//向左
			// if (direction < 0 && fishX <= -(fishW - wrapperW)) return;//向右
			if (timer) clearInterval(timer);
			timer = setInterval(() => {
				fishX += (direction * step);
				this.scroll.scrollTo(fishX, 0);
			}, 20)
		},
		handleStop() {
			clearInterval(timer);
		},
		betterScrollInit() {
			this.$nextTick(() => {
				if (this.scroll) {
					this.scroll.destroy();
					this.scroll = null;
				}

				wrapperW = this.$refs.wrapper.offsetWidth;
				fishW    = this.$refs.fish.offsetWidth;

				this.scroll = new BScroll(this.$refs.wrapper, {
					startX          : 0,  // 配置的详细信息请参考better-scroll的官方文档，这里不再赘述
					click           : true,
					tap             : true,
					scrollX         : true,
					scrollY         : false,
					eventPassthrough: 'vertical',
					scrollbar       : {
						fade       : false,
						interactive: false // 1.8.0 新增
					},
				});
				this.scroll.on('scrollEnd', (pos) => {
					// console.log('scrollEnd', pos.x);
					fishX = pos.x;
				})
			})
		}
	},
	mounted() {
		// this.betterScrollInit();

	},
	destroyed() {
		this.scroll.destroy();
		this.scroll = null;
	}
}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/_variables.scss";

	.wrapper-box /deep/ .bscroll-indicator {
		background-color: #edeef2 !important;
	}

	.container {
		padding: 40px;
		position: relative;
		height: 100%;
		user-select: none;

		.wrapper-box {
			width: 100%;
			height: 100%;
			position: relative;
			overflow: hidden;
			/*background-color: #409eff;*/

			.content-box {
				//@include flex-column(center, flex-start);
				@include flex-start();
				padding: 0 20px;
				position: relative;
				width: fit-content;
				min-width: 100%;
				height: 100%;
				cursor: grab;
				/*background-color: #ff4871;*/
				background-clip: padding-box;
				background-image: url("~@/assets/images/bg-1.png");
				background-repeat: repeat;
				background-size: auto 100%;


			}
		}



		.btn-img {
			top: calc(50% - 37px);
			position: absolute;
			width: 25px;
			height: 75px;
			cursor: pointer;

			&:active {
				filter: brightness(.95);
			}
		}
	}
</style>
